<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI播客生成器</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">AI播客生成器 🎙️</h1>
        
        <!-- 输入表单 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>生成播客</h5>
            </div>
            <div class="card-body">
                <form id="podcastForm">
                    <div class="mb-3">
                        <label for="topic" class="form-label">播客主题</label>
                        <input type="text" class="form-control" id="topic" placeholder="请输入播客主题关键词" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">生成模式</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="mode" id="singleMode" value="single" checked>
                                <label class="form-check-label" for="singleMode">单角色深度分析</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="mode" id="multiMode" value="multi">
                                <label class="form-check-label" for="multiMode">多角色讨论</label>
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary" id="generateBtn">生成播客</button>
                </form>
            </div>
        </div>
        
        <!-- 任务列表 -->
        <div class="card">
            <div class="card-header">
                <h5>生成任务</h5>
            </div>
            <div class="card-body">
                <div id="tasksContainer">
                    <p class="text-muted text-center" id="noTasksMessage">暂无生成任务</p>
                    <!-- 任务将在这里动态添加 -->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>